<template>
  <div
    class="cardaContainer"
    @click="handleClick"
    :style="{ backgroundImage: `url(${props.imageUrl})` }"
  >
    <div class="cardaTitle">
      <btn_a :title="props.title" font-size="22px" color="#FFFFFF" />
    </div>
    <div class="cardaSub1" v-if="props.str1 !== ''">
      <btn_a :title="props.str1" font-size="16px" color="#FFFFFF" />
    </div>
    <div class="cardaSub2" v-if="props.str2 !== ''">
      <btn_a :title="props.str2" font-size="16px" color="#FFFFFF" />
    </div>
  </div>
</template>

<script setup lang="ts">
import defaultImage from "@/assets/png/card1.png";
import btn_a from "../buttons/btn_a.vue";
import { msgbox } from "@/utils/msgboxutils";

const props = defineProps({
  imageUrl: {
    type: String,
    required: false,
    default: defaultImage,
  },
  title: {
    type: String,
    required: false,
    default: "Test",
  },
  str1: {
    type: String,
    required: false,
    default: "",
  },
  str2: {
    type: String,
    required: false,
    default: "",
  },
});

function handleClick(_: MouseEvent) {
  msgbox.success(`卡片被你按下。`);
}
</script>

<style scoped lang="scss">
.cardaContainer {
  @include relative_hw(141px, 230px);
  flex-direction: column;
  border-radius: 6px;
  background-size: cover;
  background-position: center;

  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
  }
  &:active {
    transform: scale(0.9);
  }
  .cardaTitle {
    @include relative_hw(30px, auto);
    margin-left: 27px;
    // margin-top: 24px;
  }

  .cardaSub1,
  .cardaSub2 {
    @include relative_hw(22px, 64px);
    margin-left: 27px;
    margin-top: 11px;
  }
}
</style>
